<template>
    <div>
        <!-- <div id="myChart" :style="{width: '800px', height: '600px'}"></div> -->

        <div :style="{ width: '800px', height: '600px' }">
            <ECharts ref="chart" :option="option" />
        </div>
    </div>
</template>

<script setup>

const option = {
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};





// import * as echarts from 'echarts';
// import { onMounted } from 'vue';

// onMounted(() => {
//     // 获取节点
//     const myChart = document.getElementById('myChart')
//     // 初始化
//     const init = echarts.init(myChart)

//     // 绘制图表
//     const option = {
//         xAxis: {
//             type: 'category',
//             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//         },
//         yAxis: {
//             type: 'value'
//         },
//         series: [
//             {
//                 data: [150, 230, 224, 218, 135, 147, 260],
//                 type: 'line'
//             }
//         ]
//     };
//     init.setOption(option)
// })


</script>